import {  type FC } from "react";
import { componentLibList } from "@/utils/getComponentList";
import { Typography } from "antd";
import styles from "./componentLib.module.scss";
import type { questionComponentType } from "@/utils/type";
import { useComponentStore, useStore } from "@/store";
import { nanoid } from "nanoid";

const { Title } = Typography;

const ComponentLib: FC = () => {

  const store = useComponentStore();
  const { setSelectedId,selectedId} = useStore()


  //添加组件
  const handleAddComponent = (component: questionComponentType) => {
    const fe_id = nanoid()
    store.addComponent({
      ...component,
      fe_id,
    },selectedId)
    setSelectedId(fe_id)
  }




  return (
    <div style={{ overflowY: "hidden",marginTop: "-20px"}}>
     <div style={{overflowY:"auto",height:"680px"}}>
       {componentLibList.map(group => (
        <div key={group.groupId}>
          <Title level={4}>{group.groupName}</Title>
          {group.components.map(component => (
            <div key={component.componentConfig.fe_id} className={styles['group-container']} onClick={()=>handleAddComponent(component.componentConfig)}>
              <div className={styles.component}>
                {component.component}
              </div>
            </div>

          ))}
        </div>

      ))}
     </div>
    </div>
  )
}



export default ComponentLib;